<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>天天美印</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script type="text/javascript" src="hammer.min.js"></script>
	<link type="text/css" rel="stylesheet" href="common.css" />	
	<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
	<style type="text/css">
		ul,li{
			padding:0;
			margin:0;
		}
		body{
			/*background:#f2f2f2;*/
		}

		/*main css*/
		#main{
			width:100%;
		}
		div#header img{
			width:100%;
		}
		div.content{
			/*padding:20px 12px;*/
			margin:20px 12px;
			border:1px solid #c9cacb;
		}
		div.content-part{
			padding:0 10px 10px 10px;
		}
		h3{
			font-size:1.7rem;
			color:#000;
			padding:7px 0;
			margin:0;
		}
		div.content-part img{
			width:100%;
		}
		div.content-part div{
			font-size:1.3rem;
			color:#111111;
			text-indent:2em;
			padding:12px 0 0;
		}
		div.lookAll{
			border-top:1px solid #c9cacb;
			font-size:1.7rem;
			color:#000;
			padding:8px 12px;
		}
		div.lookAll a{
			display: inline-block;
			width:24px;
			height:24px;
			background: url(arrow-right_01.png) center center no-repeat;
			background-size:8px 12px;
			vertical-align: top;
		}
	</style>
</head>
<body>

	<div id="main">
		<div id="header">
			<img src="camera_01.png" />
		</div>
		<ul id="cntlist">
			<!-- <li>
				<div class="content">
					<div class="content-part">
						<h3>手机摄影10个相关的拍摄技巧</h3>
						<img src="photoDetails.png" />
						<div>
							虽然比起相机，手机摄影的器材专业程度并不是很足够，但在机动性还是课随身携带的方便性，且也给现在许多摄影达人一个新的选择。要用手机拍出好照片不是不可能，这点从已举办8年的OPPA Awards（iPhone Phontography Awards）历届得奖作品中就可看出，不过要
						</div>
					</div>
					<div class="lookAll">阅读全文<a></a></div>
				</div>
			</li>
			<li>
				<div class="content">
					<div class="content-part">
						<h3>手机摄影10个相关的拍摄技巧</h3>
						<img src="photoDetails.png" />
						<div>
							虽然比起相机，手机摄影的器材专业程度并不是很足够，但在机动性还是课随身携带的方便性，且也给现在许多摄影达人一个新的选择。要用手机拍出好照片不是不可能，这点从已举办8年的OPPA Awards（iPhone Phontography Awards）历届得奖作品中就可看出，不过要
						</div>
					</div>
					<div class="lookAll">阅读全文<a></a></div>
				</div>
			</li> -->
		</ul>
		
	</div>
	<div id="footer">
		
	</div>
</body>
<script type="text/javascript">
    var hsqdata;
	$(document).ready(function(){
		// $("ul li:after").css("margin-top",$("ul li img").height());
		$.ajax({ 
            url:"http://ttmy.len.so/app/appapi/articlelist/type/hsq", 
            type:'get',
            dataType:'JSONP',
            success: function(data){
            	//console.log(data);
            	if(data){
               hsqdata = data;
               
            		for(var i in data){
            			var list = data[i];
            			var listr = '<li>'+
							'<div class="content">'+
								'<div class="content-part">'+
									'<h3>'+list.title+'</h3>'+
									//'<img src="photoDetails.png" />'+
									'<img src="http://ttmy.len.so'+list.cover+'" />'+
									'<div>'+list.description+'</div>'+
								'</div>'+
								'<div class="lookAll" aid="'+i+'">阅读全文<a></a></div>'+
							'</div>'+
						'</li>';

						$("#cntlist").append(listr);
            		}
            	}
            	
            }
        })
	})
    
    

 	function bindEvent () {
	  	var mc = new Hammer.Manager(document.body);
	    mc.add(new Hammer.Tap());
	    
	    mc.on("tap", function (e) {
	    	
	        var className=$(e.target).attr("class");

	        if(className=="lookAll"){
	        	//阅读全文
              var aid = $(e.target).attr("aid");
              var data = hsqdata[aid];
              api.pushTohsqDetail("goodCamera2.html",data);
	        	
	        }
	        // if(e.target.id=="btn-login"){
	        // 	window.location.href=$(e.target).attr("data")+".html";
	        // }

	    });
	}
	bindEvent();
</script>
</html>